<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>里程碑管理</span>
      </div>
      <el-table style="width: 100%" :data="tableData">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="stageName" label="阶段节点名称" align="center"></el-table-column>
        <el-table-column label="开始时间" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.planStartDate && scope.row.publishStatus == '2'">{{scope.row.planStartDate}}</span>
            <el-date-picker
              v-model="scope.row.planStartDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
              size="mini"
              v-else
              class="datePicker"
              align="center"
              :picker-options="pickerOptions"
              @focus="selectDate(scope.$index)"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="完成时间" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.planEndDate && scope.row.publishStatus == '2'">{{scope.row.planEndDate}}</span>
            <el-date-picker
              v-model="scope.row.planEndDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
              size="mini"
              v-else
              class="datePicker"
              align="center"
              :picker-options="pickerOptions1"
              @focus="selectDate(scope.$index)"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="负责人" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.managerName && scope.row.publishStatus == '2'">{{scope.row.managerName}}</span>
            <el-button size="mini" type="text" v-else @click="select(scope.$index)">{{scope.row.managerName || '选择'}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.enableStatus  == '1'">未启用</span>
            <span v-if="scope.row.publishStatus == '1' && scope.row.enableStatus  == '2'">未发布</span>
            <span v-if="scope.row.publishStatus == '2' && scope.row.enableStatus  == '2'">已发布</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.enableStatus  == '1' && $route.query.projectStatus < 7" @click="updateOne(scope.row, 2)">启用</el-button>
            <el-button size="mini" v-if="scope.row.publishStatus == '1' && scope.row.enableStatus  == '2' && $route.query.projectStatus < 7"  @click="publish(scope.row)">发布</el-button>
            <el-button size="mini" v-if="scope.row.enableStatus  == '2' && scope.row.publishStatus == '1' && $route.query.projectStatus < 7"  @click="updateOne(scope.row, 1)">不启用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="选择负责人" :visible.sync="dialogVisible" width="600px">
      <UserSelect :roleId="roleId" :checkList="checkList" v-if="dialogVisible" @changeCheckList="changeCheckList" :isSingle="isSingle"></UserSelect>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="selected">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import UserSelect from '@/components/userselect'
export default {
  components: {UserSelect},
  data() {
    return {
      tableData: [],
      value1: "",
      value2: "",
      dialogVisible: false,
      form: {},
      users: [],
      user: "",
      loading: false,
      index: '', // 里程碑数组下标
      approveNode: [],
      roleId: '',
      checkList: [],
      isSingle: true,
      pickerOptions: {
        disabledDate: (time) => {
          if (this.tableData[this.index].planStartDate != "" && this.tableData[this.index].planStartDate != null) {
            return time.getTime() > new Date(this.tableData[this.index].planEndDate).getTime();
          }
        }
      },
      pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() < new Date(this.tableData[this.index].planStartDate).getTime();
        }
      }
    };
  },
  methods: {
    changeCheckList(newCheckList){
      this.checkList = newCheckList
    },
    getMilestone() {
      let params = {
        projectId: this.$route.query.id
      };
      this.$store.dispatch('project/getMilestone', params).then(res => {
        this.tableData = res
      })
    },
    publish(item) {
      if(!item.planStartDate) {
        return this.$alert('请选择开始时间');
      }
      if(!item.planEndDate) {
        return this.$alert('请选择结束时间');
      }
      if(!item.managerId) {
        return this.$alert('请选择负责人');
      }
      let params = {
        id: item.id,
        projectId: item.projectId,
        projectName: item.projectName,
        stageName: item.stageName,
        pulishStatus: 2,
        planStartDate: item.planStartDate + " 00:00:00",
        planEndDate: item.planEndDate + " 00:00:00",
        managerId: item.managerId,
        managerName: item.managerName
      };
      this.$store.dispatch('project/publishMilestone', params).then(res => {
        this.showSuccessMessage('发布成功');
        item.publishStatus = 2;
        this.getMilestone();
        this.projectUpdate();
      })
    },
    updateOne(item, flag) {
      let params = {
        id: item.id,
        enableStatus: flag
      };
      this.$store.dispatch('project/updateMilestone', params).then(res => {
        if(flag == 2) {
          this.showSuccessMessage('启动成功');
        } else {
          this.showSuccessMessage('禁用成功');
        }
        this.getMilestone();
      });
    },
    projectUpdate() {
      let startDate,
          endDate;
      startDate = this.tableData.find(item => {
        return item.publishStatus == 2;
      }).planStartDate;
      let arr = [...this.tableData].reverse();
      endDate = arr.find(item => {
        return item.publishStatus ==2;
      }).planEndDate;
      let params = {
        id: this.$route.query.id,
        planStartDate: startDate,
        planEndDate: endDate + ' 00:00:00'
      }
      this.$store.dispatch("project/editProject", params).then(res => {
        
      });
    },
    getUser(query) {
      let params = {
        roleId: '1181464216098000897'
      };
      this.loading = true;
      this.$store.dispatch("project/getRoles", params).then(res => {
        this.loading = false;
        this.users = res;
      });
    },
    select(index) {
      this.index = index;
      this.checkList = [];
      if(this.tableData[this.index].managerName) {
        this.checkList = [{
          name: this.tableData[this.index].managerName,
          id: this.tableData[this.index].managerId
        }]
      }
      this.roleId = '1182191961320857601';
      this.dialogVisible = true;
    },
    selected() {
      this.tableData[this.index].managerName = this.checkList[0].name;
      this.tableData[this.index].managerId = this.checkList[0].id;
      this.dialogVisible = false;
    },
    getApproveNode(id) {
      let params = {
        modelId: id
      };
      this.$store.dispatch("project/getApproveNode", params).then(res => {
        this.approveNode = res;
      });
    },
    selectDate(index) {
      this.index = index;
    }
  },
  mounted() {
    this.getMilestone();
    this.getApproveNode($conf.modelId['milestone']);
  }
};
</script>
<style lang="less" scoped>
.datePicker {
  width: 100%;
  max-width: 150px;
}
</style>